<template>
	<div class="recommend" ref="recommend">
    <div class="recommend-content">
      <div v-if="recommends.length" class="slider-wrapper" ref="sliderWrapper">
        <slider>
          <div v-for="item in recommends" :key="item.id">
            <a :href="item.linkUrl">
              <img class="needsclick" :src="item.picUrl" />
            </a>
          </div>
        </slider>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommend } from '@/api/recommend.js'
import Slider from '@/base/slider/slider.vue'
import { ERR_OK } from '@/api/config.js'

export default {
  data() {
    return {
      recommends: []
    }
  },
  created() {
    getRecommend().then(res => {
      if (res.data.code === ERR_OK) {
        this.recommends = res.data.data.slider
      }      
    })
  },
  components: {
    Slider
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/variable'
.recommend
  position: fixed
  width: 100%
  top: 88px
  bottom: 0
  .recommend-content
    height: 100%
    overflow: hidden
    .slider-wrapper
      position: relative
      width: 100%
      overflow: hidden
</style>